<template>
  <view class="my-filtrate">
    <view class="my-filtrate-left-box">
      <scroll-view scroll-y :style="{ height: filtrateHeight}">
        <view
          :class="{ item: true, active: index === currentIndex }"
          v-for="(item, index) of list"
          :key="item"
          @click="currentIndex = index"
          >{{ item.title }}</view
        >
      </scroll-view>
    </view>
    <view class="my-filtrate-right-box">
      <scroll-view scroll-y :style="{ height: filtrateHeight}">
        <view
          class="right-item"
          v-for="(item, index) of rightList"
          :key="index"
          @click="handleGoTo(item)"
        >
          <text class="tag-title">{{ item.title }}</text>
          <text :class="{ tag: true, primary: item.isTrue }">{{
            item.isTrue ? '有号' : '无号'
          }}</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script lang="js" setup>
import { getCurrentInstance, ref , computed} from 'vue';
import useTemplateInfo from '@/hooks/useTemplateInfo'
const instance = getCurrentInstance();
const options = ref({
  instance,
  class: '.my-filtrate'
})
const {  screenHeight, top } = useTemplateInfo(options)
const filtrateHeight = computed(() => {
  const height = screenHeight.value - top.value
  if(!height) return 'max-content'
  return height + 'px'
})
const currentIndex = ref(0)

// 模拟后端返回数据
const list = [
  {
    id: 1,
    title: '内科',
    children: [
      {
        title: '心血管内科门诊',
        isTrue: 1 // 1 有号 0 无号
      },
      {
        title: '高血压门诊',
        isTrue: 0 // 1 有号 0 无号
      },
      {
        title: '房颤门诊',
        isTrue: 1 // 1 有号 0 无号
      },
      {
        title: '神经内科门诊',
        isTrue: 1 // 1 有号 0 无号
      },
      {
        title: '消化内科门诊',
        isTrue: 1 // 1 有号 0 无号
      },
      {
        title: '内分泌代谢知名专家门诊',
        isTrue: 1 // 1 有号 0 无号
      },
      {
        title: '呼吸与危害症医学科门诊',
        isTrue: 1 // 1 有号 0 无号
      },
      {
        title: '全科医学门诊',
        isTrue: 1 // 1 有号 0 无号
      },
      {
        title: '放疗科门诊',
        isTrue: 1 // 1 有号 0 无号
      },
      {
        title: '肿瘤内科知名专家门诊',
        isTrue: 1 // 1 有号 0 无号
      },
      {
        title: '肿瘤内科门诊',
        isTrue: 1 // 1 有号 0 无号
      },
      {
        title: 'A科门诊',
        isTrue: 1 // 1 有号 0 无号
      },
      {
        title: 'B专家门诊',
        isTrue: 1 // 1 有号 0 无号
      },
      {
        title: 'C内科门诊',
        isTrue: 1 // 1 有号 0 无号
      }
    ]
  },
  {
    id: 2,
    title: '外科',
    children: [
      {
        title: '心血管外科门诊',
        isTrue: 1 // 1 有号 0 无号
      },
      {
        title: '高血压门诊',
        isTrue: 1 // 1 有号 0 无号
      },
      {
        title: '房颤门诊',
        isTrue: 1 // 1 有号 0 无号
      },
      {
        title: '神经外科门诊',
        isTrue: 1 // 1 有号 0 无号
      },
      {
        title: '消化外科门诊',
        isTrue: 1 // 1 有号 0 无号
      },
      {
        title: '内分泌代谢知名专家门诊',
        isTrue: 1 // 1 有号 0 无号
      },
      {
        title: '呼吸与危害症医学科门诊',
        isTrue: 1 // 1 有号 0 无号
      },
      {
        title: '全科医学门诊',
        isTrue: 1 // 1 有号 0 无号
      },
      {
        title: '放疗科门诊',
        isTrue: 1 // 1 有号 0 无号
      },
      {
        title: '肿瘤外科知名专家门诊',
        isTrue: 1 // 1 有号 0 无号
      },
      {
        title: '肿瘤外科门诊',
        isTrue: 1 // 1 有号 0 无号
      }
    ]
  }
]

const rightList = computed(() => list[currentIndex.value].children)


const handleGoTo = (item) => {
  if(item.isTrue) {
    uni.navigateTo({
      url: '/pages/arrangement/arrangement'
    })
  } else {
    uni.showToast({
      icon: 'error',
      title: '当前无号，谢谢你的关注'
    })
  }
}
</script>

<style scoped lang="scss">
.my-filtrate {
  display: flex;
  .my-filtrate-left-box {
    width: 242rpx;
  }
  .my-filtrate-right-box {
    flex: 1;
  }
  .item {
    font-size: 28rpx;
    padding: 48rpx 36rpx 48rpx 48rpx;
    background: #f7f8fa;
    &.active {
      background-color: #fff;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 8rpx;
        margin-top: -24rpx;
        height: 48rpx;
        background-color: $uni-color-primary;
      }
    }
  }
  .right-item {
    font-size: 28rpx;
    padding: 32rpx 0 32rpx 0;
    margin-right: 30rpx;
    margin-left: 20px;
    box-sizing: border-box;
    font-weight: 400;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e8e8e8;
    .tag {
      font-size: 24rpx;
      padding: 4rpx 12rpx;
      background-color: #f7f8fa;
      color: #333;
      &.primary {
        background-color: #e6f7f4;
        color: $uni-color-primary;
      }
    }
  }
}
</style>
